<template>
  <div :class='s.wrap'>
    <div :class='s.joinWrap'>
      <div 
        :class='s.join'
        :style='{backgroundColor: gameStep === "0" ? "#ddd" : "#fff005", color: gameStep === "0" ? "#fff" : "#a33815"}'
        @click='onJoin'>立即参赛</div>
    </div>
    <div :class='s.amountWrap'>参赛需缴纳<span :class='s.amount'>{{amount | cutNumber}}</span>君元宝</div>
    <game-pwd-input-modal></game-pwd-input-modal>
    <game-register-succ-modal></game-register-succ-modal>
  </div>
</template>

<script>
import RemoteDAO from 'common/remoteDAO'
import LocalDAO from 'common/localDAO'
import GamePwdInputModal from  'components/modal/GamePwdInputModal'
import GameRegisterSuccModal from 'components/modal/GameRegisterSuccModal'
import cutNumber from 'filters/cutNumber'
export default {
  components: {
    'game-pwd-input-modal':GamePwdInputModal,
    'game-register-succ-modal':GameRegisterSuccModal
  },
  filters: {
    cutNumber
  },
  props: {
    gameID: String,
    createUser: String,
    amount: {
      type: String,
      default : '0'
    },
    isGamePWD: String,
    gamePWD: String,
    gameStep: String,
    hasJoinDate: false
  },
  methods: {
    onJoin () {
      var nickName = LocalDAO.getNickname()
      if (typeof nickName === 'undefined' || nickName === ''){
        this.TD("2004")
        RemoteDAO.callNativeLogin(function (response) {
          window.location.reload(true);
        })
      } else {// 已登录
        if (this.gameStep === '0') {
          this.$store.dispatch('setTip', {text: '报名尚未开放'})
          return
        }
        if (this.gameStep === '2') {
          this.$store.dispatch('setTip', {text: '报名期已结束'})
          return
        }
        if (this.isGamePWD === '1'){
          this.$store.dispatch('setModal', {visible: true, modalId: 'gamePwdInputModal',gameId:this.gameID,createUser:this.createUser});
        } else {
          this.gameSignUp(this.gamePWD)
        }
      }
    },
    gameSignUp(gamePWD){
      var usercode = LocalDAO.getUserCode()
      RemoteDAO.callUC12008304(usercode, this.gameID, gamePWD, this.createUser, response => {
        if (response.error === '0') {
          this.$store.dispatch('setModal', {visible: true, modalId: 'gameRegisterSuccModal'})
        } else {
          this.$store.dispatch('setTip',{text:response.data})
        }
        this.TD('12002')
      })
    },
    TD(code){// 埋点
      TDAPP.onEvent(code, "",  {"usercode":LocalDAO.getUserCode()})
      TDAPP.send()
    }
  }
}
</script>

<style lang="less" module='s'>
.wrap{
  padding: 0 10px;
}
.joinWrap{
  width: 60%;
  height: 38px;
  position: relative;
  margin: auto;
}
.join{
  width: 100%;
  height: 100%;
  border-radius: 19px;
  font-size: 16px;
  line-height: 38px;
  font-weight: bold;
}
.cover{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 19px;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: rgba(255,255,255, 0.8);
}
.amountWrap{
  font-size: 12px;
  padding-top: 10px;
  .amount{
    color: #fff005;
  }
}

</style>